<template>
  <div>
    <h2>方案一：点击复制</h2>
    <a-table :columns="columns" :data-source="data" :pagination="false">
      <template slot="age" slot-scope="text, record, index">
        {{ text }}
        <a-tooltip v-if="text && !!copyData[index]">
          <div slot="title" v-html="copyData[index]" style="white-space: pre-wrap;"></div>
          <a-icon
            style="margin-left: 10px; font-size:12px"
            type="copy"
            @click="copyText(copyData[index])"
          />
        </a-tooltip>
      </template>
    </a-table>
    <hr />
    <h2>方案二：手动复制</h2>
    <a-table :columns="columns" :data-source="data" :pagination="false">
      <template slot="age" slot-scope="text, record, index">
        <a-tooltip v-if="text && !!copyData[index]">
          <div slot="title" v-html="copyData[index]" style="white-space: pre-wrap;"></div>
          {{ text }}
        </a-tooltip>
        <span v-else>{{ text }}</span>
      </template>
    </a-table>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {
      columns: [
        {
          title: '因子代码',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '因子名称',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '因子类型',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '因子分类',
          dataIndex: 'address1',
          key: 'address1',
        },
        {
          title: '因子匹配逻辑',
          dataIndex: 'address2',
          key: 'address2',
        },
        {
          title: '因子释义',
          dataIndex: 'address3',
          key: 'address3',
          scopedSlots: { customRender: 'age' },
        },
        {
          title: '修改人',
          dataIndex: 'address4',
          key: 'address4',
        },
        {
          title: '修改时间',
          dataIndex: 'address5',
          key: 'address5',
        },
      ],
      copyData: [
        '',
        '[来源]:\n车险报价引擎系统\n[是否允许为空]:否\n[获取方式]:\n车险报价引擎系统，保费计算内部过程计算\n[获取环节]:\n在限制报价规则匹配、标准保费计算、连平台投保查询之前\n[说明]:\n车龄=车辆使用天数/365\n车辆使用天数=保单起保日期–车辆初登日期\n车龄保留2位小数，—定是一个大于0.00的数值，例如:7.52',
        '',
      ],
      data: [
        {
          key: '1',
          name: 'applicantSex',
          age: '投保人性别',
          address: '直接因子',
          address1: '投保人',
          address2: '相等',
          address3: '投保人性别',
          address4: '张三',
          address5: '2022-05-26',
        },
        {
          key: '2',
          name: 'carAge',
          age: '车龄',
          address: '直接因子',
          address1: '被保车辆',
          address2: '属于区间',
          address3: '车龄',
          address4: '张三',
          address5: '2022-05-26',
        },
        {
          key: '3',
          name: 'quoteTime',
          age: '报价时间',
          address: '直接因子',
          address1: '保单属性',
          address2: '属于区间',
          address3: '报价时间',
          address4: '张三',
          address5: '2022-05-26',
        },
      ],
    }
  },
  components: {},
  created() {},
  // destroyed
  computed: {},
  methods: {
    async copyText(text) {
      // 复制文本
      try {
        await navigator.clipboard.writeText(text)
        this.$message.success('复制成功')
      } catch (err) {
        console.error('Async: Could not copy text: ', err)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
